<form id="<?php echo $uniqid;?>" method="post" style="padding: 8px;">
    <table border="0" width="100%" cellspacing="1" cellpadding="5" class="formtable datagrid-toolbar">
        <tr bgcolor="#FFFFFF">
            <td>
                <label><input type="checkbox" class="textbox-prompt" v-model="checkAll">全选/取消</label>
            </td>
            <td>
                <input type="text" style="width:100px;" v-model="keywords"
                       class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
                       placeholder="">
                <a href="javascript:void(0);" @click="search();" class="l-btn l-btn-small l-btn-plain"><span
                    class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">过滤</span></span></a>
            </td>
        </tr>
        <tr bgcolor="#FFFFFF">
            <td colspan="2">
                <ul id="merchantDispatchSelectAreaMenu" name="menu_ids"></ul>
            </td>
        </tr>
    </table>
</form>

<script>
    var merchantDispatchSelectAreaVm = new Vue({
        el: '#<?php echo $uniqid;?>',
        data: {
            treeData: JSON.parse('<?php echo json_encode($areas, JSON_UNESCAPED_UNICODE);?>'),
            checkAll: false,
            keywords: '',
        },
        mounted(){
            this.init();
        },
        watch: {
            checkAll: {
                handler(newVal, oldVal) {
                    if(newVal){
                        $('#merchantDispatchSelectAreaMenu').tree('getRoots').forEach((item)=>{
                            $('#merchantDispatchSelectAreaMenu').tree('check', item.target);
                        });
                    }else{
                        $('#merchantDispatchSelectAreaMenu').tree('getRoots').forEach((item)=>{
                            $('#merchantDispatchSelectAreaMenu').tree('uncheck', item.target);
                        });
                    }
                }
            }
        },
        methods: {
            init(){
                $('#merchantDispatchSelectAreaMenu').tree({
                    data: this.treeData,
                    checkbox: true,
                    lines: true,
                }).tree('collapseAll');
            },
            search(){
                $.messager.progress();
                $.post('/merchant/dispatch/selectAreaData', {keywords: merchantDispatchSelectAreaVm.keywords}, (data)=> {
                    $.messager.progress('close');
                    if (data.ret === 0) {
                        this.treeData = data.data;
                        $('#merchantDispatchSelectAreaMenu').tree({
                            data: this.treeData,
                            checkbox: true,
                            lines: true,
                        }).tree('expandAll');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                });
            },
        }
    });
    $(function () {
        $('#merchantDispatchAreaSubmit').click(function (data) {
            let ids = getTreeRenderChecked('#merchantDispatchSelectAreaMenu');
            $.post('/merchant/dispatch/selectarea', {ids: ids}, function (data) {
                if (data.ret === 0) {
                    $('#<?php echo $uniqid;?>').form('clear');
                    $("#merchantDispatchAreaDlg").dialog('close');
                    merchantDispatchVm.flushArea('<?php echo $index;?>', data.data);
                } else {
                    $.messager.alert('提示', data.msg, 'warning');
                }
            });
        });
    });
</script>
